import React from 'react';
import { Button, Popconfirm, Space, Modal, Form, Input, Select, Row, Col, DatePicker } from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  FileSearchOutlined,
  PrinterOutlined,
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
import TableCom from '../../../Component/tableCompoment/index';
import Cookie from 'js-cookie';
const { Option } = Select;
let time;
class approveList extends React.Component {
  formRef = React.createRef();
  constructor(prop) {
    super(prop);
    this.state = {
      btnStyle: 'button-color-daybreak',
      column: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key',
        },
        {
          title: '申请日期',
          dataIndex: 'applyDate',
          key: 'applyDate',
        },
        {
          title: '付款日期',
          dataIndex: 'payDate',
          key: 'payDate',
        },
        {
          title: '用款事由',
          dataIndex: 'useReason',
          key: 'useReason',
        },
        {
          title: '审批金额',
          dataIndex: 'approveMoney',
          key: 'approveMoney',
        },
        {
          title: '款项类别',
          dataIndex: 'moneyType',
          key: 'moneyType',
        },
        {
          title: '付款方式',
          dataIndex: 'payMethod',
          key: 'payMethod',
        },
        {
          title: '收款单位名称',
          dataIndex: 'beneficiaryName',
          key: 'beneficiaryName',
        },
        {
          title: '收款单位开户银行',
          dataIndex: 'bank',
          key: 'bank',
        },
        {
          title: '收款单位银行账号',
          dataIndex: 'bankAccount',
          key: 'bankAccount',
        },
        {
          title: '分管领导',
          dataIndex: 'chargeLeader',
          key: 'chargeLeader',
        },
        {
          title: '财务经理',
          dataIndex: 'userType',
          key: 'userType',
        },
        {
          title: '总经理',
          dataIndex: 'financialManage',
          key: 'financialManage',
        },
        {
          title: '出纳',
          dataIndex: 'cashier',
          key: 'cashier',
        },
        {
          title: '申请人',
          dataIndex: 'applicant',
          key: 'applicant',
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (_, record) =>
            this.state.tableData.length >= 1 ? (
              <Space>
                <Popconfirm
                  cancelText="取消"
                  okText="确定"
                  title="确定删除此条数据吗?"
                  onConfirm={() => this.handleDelete(record.key)}
                >
                  <Button
                    icon={<DeleteOutlined />}
                    className={this.state.btnStyle + ' ' + 'button-noback'}
                  >
                    删除
                  </Button>
                </Popconfirm>
                <Button
                  onClick={this.handleDetail.bind(this, record)}
                  icon={<FileSearchOutlined />}
                  className={this.state.btnStyle + ' ' + 'button-noback'}
                >
                  详情
                </Button>
                <Button
                  onClick={this.handlePrint.bind(this, record)}
                  icon={<PrinterOutlined />}
                  className={this.state.btnStyle + ' ' + 'button-noback'}
                >
                  打印
                </Button>
              </Space>
            ) : null,
        },
      ],
      tableData: [], //表格数据
      top: 'none', //顶部是否有分页器及分页器位置
      bottom: 'bottomCenter', //底部是否有分页器及分页器位置
      visible: false, //modal框是否显示
      confirmLoading: false, //确定延时，异步回调
      Title: '', //modal标题
      layout: {
        //表单位置
        labelCol: { span: 4 },
        wrapperCol: { span: 16 },
      },
      modalLayout: {
        //模态框表单位置
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
      },
      initValue: {},
      isResetPwd: false,
    };
  }
  handlePrint = () => {
    this.setState({
      visible: true,
    });
  };
  //进入审批详情页
  handleDetail = (val, e) => {
    this.props.history.push({ pathname: '/Main/MoneyManage/approveDetail', state: val });
  };
  //modal框确定
  handleOk = () => {
    this.formRef.current
      .validateFields()
      .then(values => {
        this.formRef.current.resetFields();
        this.setState({
          visible: false,
        });
      })
      .catch(info => {
        message.error('请正确填写数据!');
      });
  };
  //modal取消
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  //导出
  handleExport = () => {
    console.log('导出');
  };
  //搜索
  onFinish = val => {
    console.log(val);
    //val代表表单输入的值，在这里进行搜索
  };
  //重置
  onReset = () => {
    this.formRef.current.resetFields();
  };
  //下拉列表框值改变
  onGenderChange = value => {
    // console.log(value);
  };
  renderModal = () => {
    return (
      <>
        <h1 className="center">付款审批单</h1>
        <span className="w50 inlineblock">申请日期：</span>
        <span className="w50 inlineblock">付款日期：</span>
        <table border="1" width="100%" className="center marT10">
          <tbody>
            <tr>
              <td colSpan="2">用款事由</td>
              <td colSpan="6">永页5平台、8平台35kV架空线供电施工工程</td>
              <td>申请人</td>
              <td>xx</td>
            </tr>
            <tr>
              <td colSpan="2">款项类别</td>
              <td colSpan="2">借款</td>
              <td colSpan="2">付款方式</td>
              <td colSpan="2">银行转账</td>
              <td rowSpan="2"> 分管领导</td>
              <td rowSpan="2">xxx</td>
            </tr>
            <tr>
              <td rowSpan="3">收款单位</td>
              <td>单位名称</td>
              <td colSpan="6">李勇</td>
            </tr>
            <tr>
              <td>开户银行</td>
              <td colSpan="6">中国工商银行</td>
              <td rowSpan="2">财务经理</td>
              <td rowSpan="2">xzxz</td>
            </tr>
            <tr>
              <td>银行账号</td>
              <td colSpan="6">6222&nbsp;0844&nbsp;0200&nbsp;2754&nbsp;951</td>
            </tr>
            <tr>
              <td colSpan="2" rowSpan="2">
                审批金额
              </td>
              <td>小写:¥</td>
              <td colSpan="5">45,000.00</td>
              <td rowSpan="2">总经理</td>
              <td rowSpan="2">dsad</td>
            </tr>
            <tr>
              <td>大写:</td>
              <td colSpan="5">肆万伍仟元整</td>
            </tr>
            <tr>
              <td colSpan="2">备注</td>
              <td colSpan="6">付款时请备注，永页项目借支</td>
              <td>出纳</td>
              <td>奥术大师</td>
            </tr>
          </tbody>
        </table>
      </>
    );
  };
  render() {
    const { Title, visible, confirmLoading, column, tableData, top, bottom, layout } = this.state;
    return (
      <>
        <div className="topSelect">
          <Form {...layout} ref={this.formRef} onFinish={this.onFinish}>
            <Row gutter={24}>
              <Col span="6">
                <Form.Item name="applyDate" label="申请日期">
                  <Input />
                </Form.Item>
              </Col>
              <Col span="6">
                <Form.Item name="payDate" label="付款日期">
                  <Input />
                </Form.Item>
              </Col>
              <Col span="6">
                <Form.Item name="chargeLeader" label="分管领导">
                  <Input />
                </Form.Item>
              </Col>
              <Col span="6">
                <Form.Item name="applicant" label="申请人">
                  <Input />
                </Form.Item>
              </Col>
              <Col span="6">
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    搜索
                  </Button>
                  <Button htmlType="button" onClick={this.onReset}>
                    重置
                  </Button>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
        <div className="topOperation">
          <Button type="primary" onClick={this.handleExport} icon={<PlusOutlined />}>
            导出
          </Button>
        </div>
        <div className="tableCont">
          <TableCom
            tableColumns={column}
            tableData={tableData}
            top={top}
            bottom={bottom}
            isSelect={true}
          ></TableCom>
        </div>
        <Modal
          width="700px"
          okText={'确定'}
          cancelText={'取消'}
          title={Title}
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
        >
          {this.renderModal()}
        </Modal>
      </>
    );
  }
  componentDidMount() {
    let that = this;
    time = setInterval(function () {
      if (that.state.btnStyle !== Cookie.get('btnColor')) {
        that.setState({
          btnStyle: Cookie.get('btnColor'),
        });
      }
    }, 500);
    this.setState({
      btnStyle: Cookie.get('btnColor') || 'button-color-daybreak',
      tableData: [
        {
          key: 1,
          userId: '1',
          userName: '董事长',
          tellPhone: '17712012356',
          insertTime: '2021-2-23',
          department: '董事会',
          userType: '超级管理员',
        },
        {
          key: 2,
          userId: '2',
          userName: '翠芳',
          tellPhone: '13564569568',
          insertTime: '2021-2-23',
          department: '财务部',
          userType: '部门经理',
        },
        {
          key: 3,
          userId: '3',
          userName: '小邋遢',
          tellPhone: '15645689562',
          insertTime: '2021-2-23',
          department: '财务部',
          userType: '普通员工',
        },
      ],
    });
  }
  componentWillUnmount() {
    clearInterval(time);
  }
}
export default withRouter(approveList);
